<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Form validation | AppStart - Admin Template</title>
        <!-- Mobile specific metas -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!-- Force IE9 to render in normal mode -->
        <!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
        <meta name="author" content="SuggeElson" />
        <meta name="description" content="AppStart admin template - new premium responsive admin template. This template is designed to help you build the site administration without losing valuable time.Template contains all the important functions which must have one backend system.Build on great twitter boostrap framework"
        />
        <meta name="keywords" content="admin, admin template, admin theme, responsive, responsive admin, responsive admin template, responsive theme, themeforest, 960 grid system, grid, grid theme, liquid, jquery, administration, administration template, administration theme, mobile, touch , responsive layout, boostrap, twitter boostrap"
        />
        <meta name="application-name" content="AppStart admin template" />
        <!-- Import google fonts - Heading first/ text second -->
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700' rel='stylesheet' type='text/css'>
        <!-- Css files -->
        <!-- Icons -->
        <link href="assets/css/icons.css" rel="stylesheet" />
        <!-- Bootstrap stylesheets (included template modifications) -->
        <link href="assets/css/bootstrap.css" rel="stylesheet" />
        <!-- jQueryUI -->
        <link href="assets/css/appstart-theme/jquery.ui.all.css" rel="stylesheet" />
        <!-- Plugins stylesheets (all plugin custom css) -->
        <link href="assets/css/plugins.css" rel="stylesheet" />
        <!-- Main stylesheets (template main css file) -->
        <link href="assets/css/main.css" rel="stylesheet" />
        <!-- Custom stylesheets ( Put your own changes here ) -->
        <link href="assets/css/custom.css" rel="stylesheet" />
        <!-- Fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/img/ico/apple-touch-icon-57-precomposed.png">
        <link rel="icon" href="assets/img/ico/favicon.ico" type="image/png">
        <!-- Windows8 touch icon ( http://www.buildmypinnedsite.com/ )-->
        <meta name="msapplication-TileColor" content="#3399cc" />
    </head>
    <body class="ovh">
	<div id="preloader">
            <div id="preloader-logo">
                <img src="assets/img/preloader-logo.png" alt="Logo">
            </div>
            <div id="preloader-icon">
                <i class="im-spinner icon-spin"></i>
            </div>
        </div>
        <div id="header">
            <div class="container-fluid">
                <div class="navbar">
                    <div class="navbar-header">
                        <!-- Show navigation toggle on phones -->
                        
                        <!-- Show logo for large screens and laptops -->
                        <a class="navbar-brand visible-lg visible-md" href="index.html">
                            <img src="assets/img/logo.png" alt="Jump start">
                        </a>
                        <!-- Show logo for small screens -->
                       </div>
                    </div>
            </div>
        </div>
        <!-- End #header -->
        <!-- Start #sidebar -->
        <aside id="sidebar">
            <!-- Start .sidebar-inner -->
            <div class="sidebar-inner">
                <!-- Start .toggle-sidebar -->
                <div class="toggle-sidebar">
                    <a href="index.html#"><i class="im-arrow7"></i></a>
                </div>
                <!-- End .toggle-sidebar -->
                <!-- Start .option-buttons -->
                <div class="option-buttons">
                    <div class="option-buttons-inner">
                        <form id="search-nav">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Find menu item">
                                <i class="im-search3"></i>
                            </div>
                            <button type="submit" class="btn">submit</button>
                            <a id="close-search-nav" class="close" aria-hidden="true" href="index.html#">&times;</a>
                        </form>
                        <a href="index.html#" class="search-in-menu btn btn-default btn-sm tip" title="搜索导航"><i class="im-search3"></i></a>
                        <a href="index.html#" class="expand-subs btn btn-default btn-sm tip" title="展开所有菜单"><i class="im-sort2"></i></a>
                        <a href="index.html#" class="mute-sounds btn btn-default btn-sm tip" title="关闭声音"><i class="im-volume-medium"></i></a>
                        <a href="index.html#" class="reset-layout btn btn-default btn-sm tip" title="复位面板位置"><i class="im-spinner12"></i></a>
                        <a href="index.html#" class="launch-fullscreen btn btn-default btn-sm tip" title="全屏幕"><i class="im-expand"></i></a>
                    </div>
                </div>
                <!-- End .option-buttons -->
                <!-- Start .sidebar-scrollarea -->
                <div class="sidebar-scrollarea">
                    <h5 class="sidebar-title">导航栏</h5>
                    <ul id="sideNav" class="nav nav-pills nav-stacked">
                        <li>
                            <a href="index.html#"><i class="im-list4"></i> <span class="txt">表单</span></a>
                            <ul class="sub">
                                <li><a href="form-layout.html"><i class="im-arrow-right3"></i> <span class="txt">表单布局</span></a>
                                </li>
                                <li><a href="form-elements.html"><i class="im-arrow-right3"></i> <span class="txt">表单元素</span></a>
                                </li>
                                <li><a href="form-wizard.html"><i class="im-arrow-right3"></i> <span class="txt">表单向导</span></a>
                                </li>
                                <li><a href="form-validation.html"><i class="im-arrow-right3"></i> <span class="txt">表单校验</span></a>
                                </li>
                                <li><a href="form-wysiwyg.html"><i class="im-arrow-right3"></i> <span class="txt">所见即所得编辑</span></a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="index.html#"><i class="im-table2"></i> <span class="txt">表格</span></a>
                            <ul class="sub">
                                <li><a href="tables.html"><i class="im-arrow-right3"></i> <span class="txt">静态表格</span></a>
                                </li>
                                <li><a href="tables-data.html"><i class="im-arrow-right3"></i> <span class="txt">数据表格</span></a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="index.html#"><i class="im-cube"></i> <span class="txt">界面元素</span></a>
                            <ul class="sub">
                                <li><a href="icons.html"><i class="im-arrow-right3"></i> <span class="txt">图标</span></a>
                                </li>
                                <li><a href="panels.html"><i class="im-arrow-right3"></i> <span class="txt">面板</span></a>
                                </li>
                                <li><a href="buttons.html"><i class="im-arrow-right3"></i> <span class="txt">按钮</span></a>
                                </li>
                                <li><a href="typo.html"><i class="im-arrow-right3"></i> <span class="txt">排版</span></a>
                                </li>
                                <li><a href="notifications.html"><i class="im-arrow-right3"></i> <span class="txt">通知</span></a>
                                </li>
                                <li><a href="tabs.html"><i class="im-arrow-right3"></i> <span class="txt">标签和折叠</span></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <!-- End .sidebar-scrollarea -->
            </div>
            <!-- End .sidebar-inner -->
        </aside>
        <!-- Start #right-sidebar -->
        <!-- Start #content -->
        <div id="content">
            <!-- Start .content-wrapper -->
            <div class="content-wrapper">
                <div id="page-heading" class="page-header">
                    <h2><i class="icon im-checkbox-checked2"></i> Form validation</h2>
                    <!-- Start .bredcrumb -->
                    <ul id="crumb" class="breadcrumb">
                    </ul>
                    <!-- End .breadcrumb -->
                </div>
                <!-- Start .content-inner -->
                <div class="content-inner">
                    <!-- Start .row -->
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Start col-lg-12 -->
                            <div class="panel panel-default plain toggle">
                                <!-- Start .panel -->
                                <div class="panel-heading">
                                    <h4 class="panel-title">Form fields</h4>
                                </div>
                                <div class="panel-body">
                                    <form class="form-horizontal group-border hover-stripped" role="form" id="validate">
                                        <div class="form-group">
                                            <label for="text" class="col-lg-2 col-md-3 control-label">Required field</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input id="text" type="text" class="form-control required">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="email" class="col-lg-2 col-md-3 control-label">Email field</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input id="email" name="email" type="email" class="form-control" placeholder="Type your email">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="minval" class="col-lg-2 col-md-3 control-label">Required with min value 13</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input id="minval" type="text" class="form-control" name="minval" placeholder="">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="maxval" class="col-lg-2 col-md-3 control-label">Required with max value 13</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input id="maxval" type="text" class="form-control" name="maxval" placeholder="">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="password" class="col-lg-2 col-md-3 control-label">Password field</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="maxLenght" class="col-lg-2 col-md-3 control-label">Required with max lenght of 10</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input type="text" class="form-control" id="maxLenght" name="maxLenght" placeholder="">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="rangelenght" class="col-lg-2 col-md-3 control-label">Required range between 10-20 chars</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input type="text" class="form-control" id="rangelenght" name="rangelenght" placeholder="">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="url" class="col-lg-2 col-md-3 control-label">Required with url validaiton</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input type="text" class="form-control" id="url" name="url" placeholder="">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="date" class="col-lg-2 col-md-3 control-label">Required date</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input type="text" class="form-control" id="date" name="date" placeholder="">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="number" class="col-lg-2 col-md-3 control-label">Required number</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input type="text" class="form-control" id="number" name="number" placeholder="">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="textarea" class="col-lg-2 col-md-3 control-label">Required textarea</label>
                                            <div class="col-lg-10 col-md-9">
                                                <textarea class="form-control" name="textarea" id="textarea" rows="4"></textarea>
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="ccard" class="col-lg-2 col-md-3 control-label">Required and accept credit card number</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input type="text" class="form-control" id="ccard" name="ccard" placeholder="">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="agree" class="col-lg-2 col-md-3 control-label">Required checkbox</label>
                                            <div class="col-lg-10 col-md-9">
                                                <label class="checkbox">
                                                    <input type="checkbox" name="agree" id="agree" value="option">agree terms ?
                                                </label>
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="file" class="col-lg-2 col-md-3 control-label">Required file upload</label>
                                            <div class="col-lg-10 col-md-9">
                                                <input type="file" id="file" class="filestyle" data-buttonText="Find file" data-buttonName="btn-teal" data-iconName="im-plus-circle">
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <label for="select2" class="col-lg-2 col-md-3 control-label">Required select with filter</label>
                                            <div class="col-lg-10 col-md-9">
                                                <select class="form-control select2" name="select2" id="select2">
                                                    <option value="">Choose</option>
                                                    <optgroup label="Alaskan/Hawaiian Time Zone">
                                                        <option value="AK">Alaska</option>
                                                        <option value="HI">Hawaii</option>
                                                    </optgroup>
                                                    <optgroup label="Pacific Time Zone">
                                                        <option value="CA">California</option>
                                                        <option value="NV">Nevada</option>
                                                        <option value="OR">Oregon</option>
                                                        <option value="WA">Washington</option>
                                                    </optgroup>
                                                    <optgroup label="Mountain Time Zone">
                                                        <option value="AZ">Arizona</option>
                                                        <option value="CO">Colorado</option>
                                                        <option value="ID">Idaho</option>
                                                        <option value="MT">Montana</option>
                                                        <option value="NE">Nebraska</option>
                                                        <option value="NM">New Mexico</option>
                                                        <option value="ND">North Dakota</option>
                                                        <option value="UT">Utah</option>
                                                        <option value="WY">Wyoming</option>
                                                    </optgroup>
                                                    <optgroup label="Central Time Zone">
                                                        <option value="AL">Alabama</option>
                                                        <option value="AR">Arkansas</option>
                                                        <option value="IL">Illinois</option>
                                                        <option value="IA">Iowa</option>
                                                        <option value="KS">Kansas</option>
                                                        <option value="KY">Kentucky</option>
                                                        <option value="LA">Louisiana</option>
                                                        <option value="MN">Minnesota</option>
                                                        <option value="MS">Mississippi</option>
                                                        <option value="MO">Missouri</option>
                                                        <option value="OK">Oklahoma</option>
                                                        <option value="SD">South Dakota</option>
                                                        <option value="TX">Texas</option>
                                                        <option value="TN">Tennessee</option>
                                                        <option value="WI">Wisconsin</option>
                                                    </optgroup>
                                                    <optgroup label="Eastern Time Zone">
                                                        <option value="CT">Connecticut</option>
                                                        <option value="DE">Delaware</option>
                                                        <option value="FL">Florida</option>
                                                        <option value="GA">Georgia</option>
                                                        <option value="IN">Indiana</option>
                                                        <option value="ME">Maine</option>
                                                        <option value="MD">Maryland</option>
                                                        <option value="MA">Massachusetts</option>
                                                        <option value="MI">Michigan</option>
                                                        <option value="NH">New Hampshire</option>
                                                        <option value="NJ">New Jersey</option>
                                                        <option value="NY">New York</option>
                                                        <option value="NC">North Carolina</option>
                                                        <option value="OH">Ohio</option>
                                                        <option value="PA">Pennsylvania</option>
                                                        <option value="RI">Rhode Island</option>
                                                        <option value="SC">South Carolina</option>
                                                        <option value="VT">Vermont</option>
                                                        <option value="VA">Virginia</option>
                                                        <option value="WV">West Virginia</option>
                                                    </optgroup>
                                                </select>
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                        <div class="form-group">
                                            <div class="col-lg-offset-2">
                                                <button class="btn btn-default ml15" type="submit">Test validation</button>
                                            </div>
                                        </div>
                                        <!-- End .form-group  -->
                                    </form>
                                </div>
                            </div>
                            <!-- End .panel -->
                        </div>
                        <!-- End col-lg-12 -->
                    </div>
                    <!-- End .row -->
                </div>
                <!-- End .content-inner -->
            </div>
            <!-- End .content-wrapper -->
            <div class="clearfix"></div>
        </div>
        <!-- End #content -->
        <!-- Javascripts -->
        <!-- Important javascript libs(put in all pages) -->
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
        window.jQuery || document.write('<script src="assets/js/libs/jquery-2.1.1.min.js">\x3C/script>')
        </script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script>
        window.jQuery || document.write('<script src="assets/js/libs/jquery-ui-1.10.4.min.js">\x3C/script>')
        </script>
        <!--[if lt IE 9]>
  <script type="text/javascript" src="assets/js/libs/excanvas.min.js"></script>
  <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <script type="text/javascript" src="assets/js/libs/respond.min.js"></script>
<![endif]-->
        <!-- Bootstrap plugins -->
        <script src="assets/js/bootstrap/bootstrap.js"></script>
        <!-- Core plugins ( not remove ) -->
        <script src="assets/js/libs/modernizr.custom.js"></script>
        <!-- Handle responsive view functions -->
        <script src="assets/js/jRespond.min.js"></script>
        <!-- Custom scroll for sidebars,tables and etc. -->
        <script src="assets/plugins/core/slimscroll/jquery.slimscroll.min.js"></script>
        <script src="assets/plugins/core/slimscroll/jquery.slimscroll.horizontal.min.js"></script>
        <!-- Highlight code blocks -->
        <script src="assets/plugins/misc/highlight/highlight.pack.js"></script>
        <!-- Handle template sounds -->
        <script src="assets/plugins/misc/ion-sound/ion.sound.js"></script>
        <!-- Proivde quick search for many widgets -->
        <script src="assets/plugins/core/quicksearch/jquery.quicksearch.js"></script>
        <!-- Prompt modal -->
        <script src="assets/plugins/ui/bootbox/bootbox.js"></script>
        <!-- Other plugins ( load only nessesary plugins for every page) -->
        <script src="assets/plugins/forms/icheck/jquery.icheck.js"></script>
        <script src="assets/plugins/forms/bootstrap-filestyle/bootstrap-filestyle.js"></script>
        <script src="assets/plugins/forms/select2/select2.js"></script>
        <script src="assets/plugins/forms/validation/jquery.validate.js"></script>
        <script src="assets/plugins/forms/validation/additional-methods.min.js"></script>
        <script src="assets/js/jquery.appStart.js"></script>
        <script src="assets/js/app.js"></script>
        <script src="assets/js/pages/form-validation.js"></script>
        <!-- Google Analytics:  -->
        <script>
        (function(i, s, o, g, r, a, m)
        {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function()
            {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-3560057-27', 'auto');
        ga('send', 'pageview');
        </script>
    </body>
</html>